{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">

    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <div>
        <div class="box-header with-border">
            <h3 class="box-title">用户管理</h3>
        </div>
        <!-- form start -->
        <div class="box box-primary">
        <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div class="box-body"><a onclick="add_acount();" class="btn btn-primary"><i class="fa fa-plus"></i></a></div>
                <div class="box-body" v-show="showMain">
                    <form id="model_form" role="form" method="post">{% csrf_token %}
                        <div class="group">
                            <table id="user_each_table" border="1" class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th v-for="head in tableData.headers">
                                        <span style="float: left">
                                            [[ head.name ]]
                                        </span>
                                        {% if field.rank %}
                                            <a href="?[[ head.rank ]]=[[ head.rank_tag ]][[ page_args ]]"
                                               style="float: right">
                                                {% if field.rank_tag == 0 %}
                                                    <i class="fa fa-fw fa-sort"></i>
                                                {% elif field.rank_tag == 1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-asc"></i>
                                                {% elif field.rank_tag == -1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </th>
                                    <th>
                                        <span style="float: left">
                                            操作
                                        </span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                    <template v-for="user in tableData.users">
                                        <tr>
                                            <template v-for="head in tableData.headers">
                                                <template v-if="[[ user[head.key] ]] == '管理员'">
                                                    <td>[[ user[head.key] ]]</td>
                                                </template>
                                                <template v-else>
                                                    <td>[[ user[head.key] ]]</td>
                                                </template>
                                            </template>
                                            <td class="btn-group">
                                                <template v-if="[[ user.id ]] == {{ request.user.id }}">
                                                    <span>当前登录帐号</span>
                                                </template>
                                                <template v-else>
                                                    <a href="{% url 'zhongbao_admin:task_allocation' %}?aid=[[ user.id ]]" type="button" value="[[ user.id ]]" class="btn btn-info btn-xs">分配</a>
                                                    {% if is_super %}
                                                    <a type="button" class="btn btn-info btn-xs" onclick="removeOneAccount([[ user.id ]])">解绑</a>
                                                    {% endif %}
                                                </template>

                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                            <p class="" id="paginator">
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('first',paginator.limit)">首页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">首页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('prev',paginator.limit)">上一页</a>
                                Page [[ paginator.current ]] of [[ paginator.last ]]
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('next',paginator.limit)">下一页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('last',paginator.limit)">尾页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">尾页</a>
                                <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px" onkeyup="toPage('judge', paginator.limit)">
                                <a class="btn btn-default btn-xs"  onclick="toPage('judge', paginator.limit)">跳页</a>
                            </p>
                        </div>
                        <!-- /.box-footer -->
                        <div class="box-footer">
                            <button class="btn btn-primary no-display" id="submit_button">确认</button>
                            <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                    style="display: none">sure
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!--添加用户-->
<div class="modal fade" id="add_account" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:40%">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 221px;border-radius: 3px;">
            <div class="box box-primary">
                <div class="box-header with-border"><h3 class="box-title">添加用户</h3></div>
                <form class="form-horizontal" method="post" action="{% url 'zhongbao_admin:add_account_view' %}">{% csrf_token %}
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input name="username" class="form-control" id="add_modal_username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input name="password" type="password" class="form-control" id="add_modal_password" placeholder="密码">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary pull-right">验证</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% if is_super %}
<!--提示删除用户-->
<div class="modal fade" id="removeMessage" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:40%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                确定要解除绑定吗?
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default" onclick="remove_account()"
                        data-dismiss="modal">确认
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
<input id="uid" value="" style="display:none;"></input>
{% endif %}
    <script>

        function add_acount() {
            $("#add_account").modal();
        }
        {% if is_super %}
        function removeOneAccount(uid){
            if (uid){
                uid = uid + "";
                $("#uid").val(uid);
                $("#removeMessage").modal();
            }else{
                return false
            }
        }

        function remove_account(uid) {
            if (!uid){
                uid = $("#uid").val();
            }
            if (uid.length === 0){
                $("#taskMessage").modal();
                return false
            }else{
                pdata = {"uid":uid};
                $.post(
                    "{% url 'zhongbao_admin:del_account_view' %}",
                    pdata,
                    function(response){
                        window.location.reload();
                    }
                );
                $("#taskIds").val("");
            }
        }
        {% endif %}
        Vue.config.delimiters = ["[[", "]]"];

        function toPage(page){
            if (mainVue.paginator){
                if (page == 'current'){
                    page = mainVue.paginator.current
                }
                if (page == 'next'){
                    page = mainVue.paginator.current + 1
                }
                if (page == 'prev'){
                    page = mainVue.paginator.current - 1
                }
                if (page == 'first'){
                    page = 1
                }
                if (page == 'last'){
                    page = mainVue.paginator.last
                }
                if (page == 'judge'){
                    page = $("#page-judge").val();
                }
                if (page < 1) {
                    page = 1;
                }
                if (page > mainVue.paginator.last){
                    page = mainVue.paginator.last;
                }
                if (page < mainVue.paginator.first){
                    page = mainVue.paginator.first;
                }
            }else{
                page = 1;
            }
            mainVue.page = page;
            render(mainVue);
        }

        function render(obj){
            var searchForm = obj.searchForm + '&page=' + obj.page;
            $.get(
                "{% url 'zhongbao_admin:user_filter' %}",
                searchForm,
                function(response){
                    if (response){
                        obj.showMain = true;
                        obj.tableData = response.tableData;
                        obj.paginator = response.paginator;
                        obj.message = response.message;
                        console.log(obj.paginator);
                    }else{
                        obj.showMain = false;
                    }
                }
            )
        }
        var mainVue = new Vue({
            el: "#main",
            data: {
                page: 1,
                status: 1,
                limit: 10,
                searchForm: "",
                checkedAll: false,
                showMain: false,
                tableData: {},
                paginator: {},
                message: ""
            },
            methods: {
                getTasks: function(){
                    var searchForm = 'page=' + this.page + '&limit=' + this.limit + '&status=' + this.status;
                    $.get(
                        "{% url 'zhongbao_admin:user_filter' %}",
                        searchForm,
                        function(response){
                            if (response){
                                this.showMain = true;
                                this.tableData = response.tableData;
                                this.paginator = response.paginator;
                                this.message = response.message;
                                console.log(this.paginator);
                            }else{
                                this.showMain = false;
                            }
                        }
                    )
                }
            },
            watch: {

            }
        });
        function searchTasks(){
            mainVue.searchForm = "limit=20";
            $.get(
                "{% url 'zhongbao_admin:user_filter' %}",
                mainVue.searchForm,
                function(response){
                    if (response){
                        mainVue.limit = response.limit;
                        mainVue.showMain = true;
                        mainVue.limits = response.limits;
                        mainVue.tableData = response.tableData;
                        mainVue.paginator = response.paginator;
                        mainVue.message = response.message;
                    }else{
                        mainVue.showMain = false;
                    }
                }
            )
        }
        searchTasks();
        function changeColor(id, color){
            $(id).parent().parent().addClass("active");
            $(id).children().css("color", color);
        }
        changeColor("#user_manage", "#00FF7F");
        $('#myTasks').addClass("active");
    </script>
{% endblock section_content %}
